<template>
	<div id="you">
		<van-row class="youone">
			为您推荐
		</van-row>
		<van-row class="youtwo" v-for="(item,index) in recommend" @click="about(item,index)">
			<van-image width="100%" height="250" lazy-load :src="url+item.original_img"/>
			<van-row>
				<van-col :span="24" class="recname">
					{{item.goods_name}}
				</van-col>
			</van-row>
			<van-row>
				<van-col :span="24" class="recprice">
					<span class="recommendmoney"><span style="font-size: 0.9375rem;">￥</span>{{item.shop_price}}</span>
				</van-col>
			</van-row>
			<van-row>
				<van-col :span="24" class="reccount">
					{{item.store_count}}w万+好评
				</van-col>
			</van-row>
		</van-row>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default
	{
		data()
		{
			return{
				recommend:[],
				url:'https://img.9lele.com'
			}
		},
		computed:
		{
			...mapGetters([
				'getrecommend'
			])
		},
		created()
		{
			var _this=this;
			this.$nextTick(function()
			{
				this.$store.dispatch("picture/vuexRecommend","为您推荐")
				.then(e=>
				{
					_this.recommend=e.data.data
				})
			})
		},
		methods:
		{
			about(item,id)
			{
				this.$router.push(
				{
					path:'/recommendabout',
					query:
					{
						id:item.goods_id,
						item:item
					}
				})
			}
		}
	}
</script>

<style>
	#you{
		width: 100%;
		height: 1950px;
		margin-top: 20px;
	}
	.youone{
		width: 100%;
		height: 30px;
		font-size: 1.5625rem;
		font-weight: bold;
		text-align: left;
		text-indent: 20px;
	}
	.youtwo{
		width: 48%;
		height: 370px;
		margin-left: 2%;
		margin-top: 10px;
		float: left;
	}
	.recname{
		width: 100%;
		height: 40px;
		text-align: left;
		padding-left: 5px;
		margin-top: 10px;
		font-weight: bold;
		
		/* white-space: nowrap; */
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.recprice{
		text-align: left;
		text-indent: 5px;
		margin-top: 5px;
		color: red;
	}
	.reccount{
		text-align: left;
		text-indent: 5px;
		margin-top: 5px;
		color: #999;
	}
	.recommendmoney{
		font-size: 1.25rem;
	}
</style>
